<template>
  <div class="hello">
    <header>
      <span><img src="../assets/img/fanhui.png"></span>
      <span></span>
      <span></span>
    </header>
    <main>
      <div class="logo">
        <img src="../assets/img/touxiang.png">
      </div>
      <div class="xingji">
        <img src="../assets/img/xiangji.png">
      </div>
      <ul>
        <li>狗哥。</li>
        <li><img src="../assets/img/bk-1.png"></li>
        <li><img src="../assets/img/bk-2.png"></li>
      </ul>
      <p>申请公开博客</p>
      <ul>
        <li>狗哥。的私人博客 </li>
        <li><img src="../assets/img/bk-1.png"></li>
        <li><img src="../assets/img/bk-2.png"></li>
      </ul>
      
      <h4>还未上传节目</h4>
      <h2>录一个试试？</h2>
    </main>
    
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang = 'less'>
@import '.././assets/less/style.less';

header{
   .px2rem(height, 100);
   .webkit();
   justify-content: space-between;
   align-items: center;
   span{
    img{
      .px2rem(width, 25);
      .px2rem(height, 25);
      .padding-left(20); 
    }
   }
}
main{
  text-align: center;
  .logo{
    .margin-top(40);
    img{
      .px2rem(width, 145);
      .px2rem(height, 145);
     
    }
  }
  .xingji{
     .margin-top(20);
     img{
       .px2rem(width, 45);
       .px2rem(height, 35);
     }
  }
  ul{
    .margin-top(30);
    .webkit();
    justify-content: center;
    li{
      .font(28,#666);
    }
    li:nth-child(2){
      img{
        .px2rem(width, 30);
        .px2rem(height, 30);
        }
      }
      li:nth-child(3){
      img{
        .px2rem(width, 30);
        .px2rem(height, 30);
        .margin-left(10);
      }
    }
  }
  p{
    .px2rem(width, 206);
    .px2rem(height, 50);
    .border(1,solid,#c1c1c1);
    .line-height(50);
    margin: 0 auto;
    .margin-top(165);
    .font(24, red);
  }
  h4{
    .margin-top(256);
    .font(24,#b0b0b0);
  }
  h2{
    margin: 0 auto;
    .margin-top(30);
    .px2rem(width, 152);
    .px2rem(height, 60);
    background:#fd5353; 
    .font(24,#fff);
    .line-height(60);
    .border-radius(8);
  }
}

 

</style>
